<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<style>
			#a{
				width: 800px;
				height: 500px;
				background-image: url(picture/chaoshi.jpg);
			}
			#reg{
				width: 350px;
				padding-top: 80px ;
				margin-left:150px ;
			}
		</style>
	</head>
	<body>
		<div id="a">
		<div id="reg" >
			<h1>注册</h1>
			<div class="form-group">
				<label for="username">用户名：</label>
				<input type="text" class="form-control" id="username" name="username" 
				 placeholder="请输入用户名..." autocomplete="off"
				  autofocus="autofocus"/>
			</div>
			<div class="form-group">
				<label for="password">密码：</label>
				<input type="password"class="form-control" id="password" name="password"
				 placeholder="请输入密码..."autocomplete="off"
				 autofocus="autofocus"/>
			</div>
			<div class="form-group">
				<label for="password">确认密码：</label>
				<input type="password"class="form-control" id="password" name="password"
				 placeholder="请确认密码..."autocomplete="off"
				 autofocus="autofocus"/>
			</div>
			<div class="form-group">
				<button class="btn btn-primary"
				onclick="doSubmit()">提交</button>
				<button class="btn btn-danger" style="margin-left: 20px;">取消</button>
			</div>
			<div class="mes"></div>
		</div>
		</div>
	</body>
	<script>
		//点击按钮触发事件 doSubmit()，自定义一个函数
		function doSubmit(){
			var username = document.getElementsByName("username")[0];
			//获取唯一，html规范,标签的id属性，在页面声明时，必须唯一
			var username = document.getElementById("username");
			console.log(username.value);
			
			var mess = document.getElementsByClassName("mes")[0]
			console.log(mess.innerText)
			mess.innerHTML="<font color='red'>登陆成功，欢迎："+username.value+"</font>"
		}
	</script>
</html>
